<template>
  <div class="user-container">
    <!-- 设置余额密码 -->
    <div class="my-header">
      <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
      <strong>{{title}}</strong>
      <i class="myMsg"></i>
    </div>
    <div class="from-container">
      <form>
        <div class="cell-list">
          <!--<div class="cell-item" :class="{'is-phone':userInfo.userAccount && userInfo.userAccount!==''}">-->
          <div class="cell-item" :class="{'is-phone':userInfo.userAccount}">
            <div class="left">
              <i class="iconfont icon-phone"></i>
            </div>
            <div class="right">
              <!--<input :disabled="phone!==''" v-if="walletForm.phone===''" v-focus type="text" name="walletPhone" v-model="phone" placeholder="请输入手机号">-->
              <!--<input v-if="!userInfo.userAccount" v-focus type="text" name="walletPhone" v-model="walletForm.phone" placeholder="请输入手机号">-->
              <span class="user-account">{{walletForm.phone}}</span>
            </div>
            <!--<i class="clear" v-show=" walletForm.phone.length>0" @click="walletForm.phone=''"></i>-->
          </div>
          <div class="cell-item code-box">
            <div class="left">
              <i class="iconfont icon-message"></i>
            </div>
            <div class="right code-cell">
              <input name="walletCode" type="tel" v-model="walletForm.code" placeholder="请输入验证码">
            </div>
            <i class="clear" v-show="walletForm.code.length>0" @click="walletForm.code=''" style="right:120px;"></i>
            <div :class="['registered-getCode',walletForm.resetSendPhoneMessage?'disabled-btn':'']" @click="sendPhoneMessage" :disabled="walletForm.resetSendPhoneMessage">{{walletForm.resetSendPhoneMessage ? `(${walletForm.resetSendPhoneMessage})` : '获取验证码'}}</div>
          </div>
          <div class="cell-item">
            <div class="left">
              <i class="iconfont icon-message"></i>
            </div>
            <div class="right">
              <input @focus="errMessage=''" name="payPwd" :type="walletForm.payFormType" v-model="walletForm.payPwd" placeholder="请设置支付密码">
            </div>
            <i class="clear" v-show="walletForm.payPwd.length>0" @click="walletForm.payPwd=''" style="right: 40px;"></i>
            <i :class="['eye-icon', walletForm.payFormType=='password'?'eye-close-icon':'']" style="position: absolute;right: 10px;"
              @click="walletForm.payFormType=walletForm.payFormType=='password'?'text':'password'"></i>
          </div>
          <div class="cell-item">
            <div class="left">
              <i class="iconfont icon-message"></i>
            </div>
            <div class="right">
              <input name="confirmPayPwd" :type="walletForm.confirmPayFormType" v-model="walletForm.confirmPayPwd" placeholder="请重复支付密码">
            </div>
            <i class="clear" v-show="walletForm.confirmPayPwd.length>0" @click="walletForm.confirmPayPwd=''" style="right: 40px;"></i>
            <i :class="['eye-icon', walletForm.confirmPayFormType=='password'?'eye-close-icon':'']" style="position: absolute;right: 10px;"
              @click="walletForm.confirmPayFormType=walletForm.confirmPayFormType=='password'?'text':'password'"></i>
          </div>
        </div>
      </form>
      <div class="notice">{{errMessage}}</div>
      <div class="cell-box">
        <div :class="['cell-btn',walletForm.code==''||walletForm.payPwd==''||walletForm.confirmPayPwd==''?'disabled-btn':'']" @click="()=>{walletForm.code==''||walletForm.payPwd==''||walletForm.confirmPayPwd==''?false:validatePhoneMessag()}">确认</div>
      </div>
    </div>
    <!-- 忘记密码 -->
  </div>
</template>
<script>
  import {
    Toast,
    MessageBox
  } from 'mint-ui'
  import {
    sendPhoneCode,
    validateCode,
    setPayPwd,
    updatePayPwd
  } from '@/api/user'
  import {
    mapGetters
  } from 'vuex'
  import {
    encryptString
  } from '@/utils/mixin'
  // import * as Validate from '@/utils/validate'
  export default {
    data() {
      return {
        hasPhone: false,
        errMessage: '',
        visiblePopup: {
          forget: true
        },
        title: '设置支付密码',
        walletForm: {
          phone: '',
          code: '',
          payPwd: '',
          confirmPayPwd: '',
          payFormType: 'password',
          confirmPayFormType: 'password',
          resetSendPhoneMessage: null
        }
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },

    methods: {
      sendPhoneMessage() { // 忘记密码获取验证码
        const params = {
          tel: this.userInfo.userAccount,
          fal: 0 // 手机已经存在
        }
        // 如果手机号不为空
        // if (this.userInfo.userAccount !== '') {
        //   params.tel = this.userInfo.userAccount
        // } else {
        //   if (!Validate.mobile(this.walletForm.phone)) {
        //     this.errMessage = '请输入正确手机号'
        //     return false
        //   }
        //   if (this.walletForm.payPwd !== this.walletForm.confirmPayPwd) {
        //     this.errMessage = '支付密码不一致'
        //     return false
        //   }
        //   params.tel = this.walletForm.phone
        // }
        // 获取验证码
        sendPhoneCode(params).then(res => {
          this.walletForm.resetSendPhoneMessage = 90
          const times = setInterval(() => {
            if (this.walletForm.resetSendPhoneMessage <= 0) {
              this.walletForm.resetSendPhoneMessage = null
              clearInterval(times)
            } else {
              this.walletForm.resetSendPhoneMessage--
            }
          }, 1000)
        }).catch(err => {
          Toast({
            message: err.info
          })
        })
      },
      validatePhoneMessag() { // 验证忘记密码短信验证码
        // 先验证字段
        if (this.walletForm.payPwd !== this.walletForm.confirmPayPwd) {
          this.errMessage = '两次支付密码不一致'
          return false
        }
        // 验证验证码
        const formData = {
          tel: this.walletForm.phone,
          code: this.walletForm.code,
          fal: 0, // 手机号不在系统中
          time: 1 // 1：15分钟后过期
        }
        validateCode(formData).then(res => {
          // 验证成功前去重置密码
          this.handleSubmit()
        }).catch(err => {
          Toast({
            message: err.info
          })
        })
      },
      handleSubmit() {
        // 如果没有手机号就获取输入框里的值
        // const phone = this.userInfo.userAccount !== undefined ? this.userInfo.userAccount : this.walletForm.phone
        // if (!Validate.mobile(phone)) {
        //   this.errMessage = '请输入正确手机号'
        //   return false
        // }
        const formData = {
          userAccount: this.walletForm.phone,
          code: this.walletForm.code,
          userId: this.userInfo.id
        }
        if (this.$route.query.type === 'edit') {
          formData.newPayPwd = encryptString(this.walletForm.payPwd)
          updatePayPwd(formData).then(res => {
            Toast({
              message: '修改成功'
            })
            this.$router.push('/security')
          }).catch(err => {
            Toast({
              message: err.info,
              position: 'bottom'
            })
          })
        } else {
          formData.payPwd = encryptString(this.walletForm.payPwd)
          // 设置支付密码
          setPayPwd(formData).then(res => {
            Toast({
              message: '设置成功'
            })
            this.$router.push('/security')
          }).catch(err => {
            Toast({
              message: err.info,
              position: 'bottom'
            })
          })
        }
      },
      fetchData() {
        this.title = this.$route.query.type === 'edit' ? '修改支付密码' : '设置支付密码'

        // this.walletForm.phone = ''
        this.walletForm.phone = this.userInfo.userAccount
        // 如果有用户信息
        // this.hasPhone = this.userInfo.userAccount !== undefined
        // console.log(this.hasPhone)
        // this.$set(this.walletForm, 'phone', this.userInfo.userAccount)
        //  console.log(this.walletForm)
        if (this.userInfo.userAccount === '' || this.userInfo.userAccount === undefined) {
          MessageBox({
            title: '提示',
            message: '设置支付密码,请先绑定手机号',
            showCancelButton: true,
            cancelButtonText: '不设置了',
            confirmButtonText: '去绑定'
          }).then(action => {
            if (action === 'cancel') {
              this.$router.push('/security')
            } else {
              this.$router.push('/bindPhone')
            }
          }).catch(() => {})
        }
      }
    },
    mounted() {
      this.fetchData()
    }
  }

</script>
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .user-container {
    background: #ffffff;
    @include wh(10rem, 100%);
    .clear {
      width: 16px;
      height: 16px;
      margin: 0;
      position: absolute;
      right: 10px;
      @include bg('~assets/common/images/close.png');
    }

    .my-header {
      padding: $padding;
      @include flexbox(space-between,
      center,
      row,
      nowrap);
      margin-bottom: 30px;
      .back {
        display: block;
        width: .65rem;
        height: .65rem;
        font-size: 18px; // background: url('~assets/common/images/arrow-left.png') no-repeat;
        // background-size: 100%;
      }
      strong {
        font-size: 18px;
        font-weight: normal;
        color: #333;
      }
      .myMsg {
        display: block;
        width: .65rem;
        height: .65rem;
      }
      .register-btn {
        font-size: $subtitle;
        border: 1px solid #ffffff;
        border-radius: 14px;
        color: #ffffff;
        height: 28px;
        line-height: 28px;
        width: 50px; // color:#333;
        // display: block;
        // height: .65rem;
        // width: .65rem;
      }
    }
  }

  .from-container {
    padding: 1rem;
    .cell-list {
      .cell-item {
        @include flexbox(flex-start,
        center,
        row,
        nowrap);
        border-bottom: 1px solid #eee;
        padding: $padding $padding $padding 0;
        margin: $margin 0;
        position: relative;
        .left {

          i {
            position: absolute;
            font-size: 24px;
            top: 5px;
          }
        }
        .user-phone {}
        .right {
          width: 80%;
          margin-left: 40px;
          @include placeholderColor($gray);
          input {
            width: 100%;
            border: none;
            outline: none;
            box-shadow: none;
            text-shadow: none;
            text-align: left;
            font-size: $title;
            color: #333;
          }
          .arrow-right {
            display: block;
            width: 16px;
            height: 20px;
            background: url('~assets/common/images/arrow-right.png') no-repeat;
            background-size: 100%;
          }
        }
      }
      .is-phone {
        border: 0;
        .user-account {
          font-size: 16px;
        }
      }
    }
    .other-link {
      @include flexbox(flex-end,
      center,
      row,
      nowrap);
      font-size: 15px;
      color: $gray;
      margin: $margin auto;
    }
  }

  .code-box {
    .code-cell {
      width: 50%!important;
    }
    .registered-getCode {
      position: absolute;
      right: 0;
      top: 6px;
      width: 100px;
      background: #333333;
      color: #fff;
      font-size: 15px;
      text-align: center;
      margin-left: 10px;
      border-radius: 15px;
      padding: 5px 8px;
    }
  }


  .notice {
    font-size: 13px;
    line-height: 1.5;
    color: #f23030;
    text-align: left;
  }

  .service {
    margin-top: 2rem;
    color: #777777;
    font-size: 14px;
    position: relative;
    text-align: center;
    a {
      text-decoration: underline;
      color: #333;
    }
  }

</style>
